<template>
<div class="container" style="position:relative;background-color:#dcdcdc;">
 


<el-container >
<my-header></my-header>
<el-container >
  <my-left id="sidebar"></my-left>
<template>
  <!--为echarts准备一个具备大小的容器dom-->
  
  <div id="one" >
  	<font color="#8d8d8d">本年事件总数</font>
  	<i class="el-icon-info" style="padding-left:90px;color:#8d8d8d" ></i>

  	<p style="font-size:28px;line-height:0px" >126,560</p>
  	<span style="color:#727272;font-size:14px">同比</span>
  	<i class="el-icon-question" style="color:#33ffba;padding-left:5px;"></i>
  	<span style="color:#000000;font-size:14px">12%</span>
  	<span style="color:#727272;font-size:14px;padding-left:20px">环比</span>
  	<i class="el-icon-question" style="color:#ff0000;padding-left:5px;"></i>
  	<span style="color:#000000;font-size:14px">11%</span>
  	<HR style="margin-top:15px;margin-left:-20px;width:200px;color:#8d8d8d;"></HR>
  	<font  size="2" color="#8d8d8d">日均事件数</font>
  	<span style="color:#000000;font-size:14px;padding-left:10px">12,423</span>
  </div>

  <div id="two" >
  	<font color="#8d8d8d">处置成功数</font>
  	<i class="el-icon-info" style="padding-left:90px;color:#8d8d8d" ></i>
  	<p style="font-size:28px;line-height:0px" >18,846</p>
  	<div id="bc" style="position:absolute;width:230px;height:100px;margin-top:-20px;margin-left:-20px;">
  	<!-- 实心折线图> -->
    </div>
    <HR style="margin-top:63px;margin-left:-20px;width:200px;color:#8d8d8d;"></HR>
    <font  size="2" color="#8d8d8d">日处置量</font>
    <span style="color:#000000;font-size:14px;padding-left:10px">1,234</span>
  </div>
 
  <div id="three">
   	<font color="#8d8d8d">周事件期数</font>
   	<i class="el-icon-info" style="padding-left:90px;color:#8d8d8d" ></i>
   	<p style="font-size:28px;line-height:0px" >560</p>
    <div id="cc" style="position:absolute;width:230px;height:100px;margin-top:-70px;margin-left:-20px;">
    <!--柱状图-->   
    </div>
    <HR style="margin-top:63px;margin-left:-20px;width:200px;color:#8d8d8d;"></HR>
    <span style="color:#727272;font-size:14px">同比</span>
  	<i class="el-icon-question" style="color:#33ffba;padding-left:5px;"></i>
  	<span style="color:#000000;font-size:14px">12%</span>
  	<span style="color:#727272;font-size:14px;padding-left:20px">环比</span>
  	<i class="el-icon-question" style="color:#ff0000;padding-left:5px;"></i>
  	<span style="color:#000000;font-size:14px">11%</span>
  </div>

  <div id="four" >
   	<font color="#8d8d8d">月事件期数</font>
   	<i class="el-icon-info" style="padding-left:90px;color:#8d8d8d" ></i>
   	<p style="font-size:28px;line-height:0px" >2,846</p>
    <div id="dc" style="position:absolute;width:230px;height:100px;margin-top:-70px;margin-left:-20px;">
    <!--柱状图-->   
    </div>
    <HR style="margin-top:63px;margin-left:-20px;width:200px;color:#8d8d8d;"></HR>
    <span style="color:#727272;font-size:14px">同比</span>
  	<i class="el-icon-question" style="color:#33ffba;padding-left:5px;"></i>
  	<span style="color:#000000;font-size:14px">12%</span>
  	<span style="color:#727272;font-size:14px;padding-left:20px">环比</span>
  	<i class="el-icon-question" style="color:#ff0000;padding-left:5px;"></i>
  	<span style="color:#000000;font-size:14px">11%</span>
  </div>
  

  <div id="five" >
  	<span style="font-size:25px;line-height:0px;" >事件量</span>
  	<i class="el-icon-download" style="padding-top:15px;padding-left:580px;color:#8d8d8d" ></i>
  	<div style="height:2px;width:720px;border-top:1px solid #ccc;margin-left:-20px;margin-top:10px;margin-bottom:10px;"></div>
    <div id="ec" style="position:absolute;width:700px;height:400px;margin-top:0px;margin-left:0px;">
    	
    </div>
  </div>
  <div id="six">
     <span style="font-size:16px;line-height:20px;font-weight:bold">
     事件来源地排名
     </span>
     <i class="el-icon-download" ></i>
     <div style="height: 2px; width: 260px; border-top: 1px solid rgb(204, 204, 204); ">
     </div>
     <div style="height:440px;width:260px;border-top:5px soild #ccc;background-color:white;">
          <el-date-picker v-model="value6"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期" style="width:260px;">
    </el-date-picker>
    </div>
  </div>
</template>

    
    
 
</el-container>  
</el-container>
</div>
</template>




<style>
 .el-menu-vertical-demo{
    height: 3500px!important;
}
#one{
position:absolute;width: 220px;height: 140px;margin-top:80px;margin-left:-840px;padding-left:20px;padding-top:10px;background-color:white;
}
#two{
position:absolute;width: 220px;height: 140px;margin-top:80px;margin-left:-580px;padding-left:20px;padding-top:10px;background-color:white;
}
#three{
position:absolute;width: 220px;height: 140px;margin-top:80px;margin-left:-320px;padding-left:20px;padding-top:10px;background-color:white;
}
#four{
position:absolute;width: 220px;height: 140px;margin-top:80px;margin-left:-60px;padding-left:20px;padding-top:10px;background-color:white;
}
#five{
position: absolute;
background-color: white;
margin-left: -840px;
margin-top: 240px;
width:700px;
height: 450px;
padding-left:20px;
padding-top:10px;
}
#six{
  position:absolute;
  background-color: white;
  top:240px;
  left:980px;
  width:260px;
}
</style>






<script >


export default { 
  mounted(){    
  	this.TwoEchart();
  	this.ThreeEchart();
  	this.FourEchart();
  	this.FiveEchart();
  },
  data () {    
  	return {     
    }
  },  
  methods: {
    
    TwoEchart(){        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('bc'))        // 绘制图表
      var   option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        show:false  //隐藏x坐标轴
    },
    yAxis: {
        type: 'value',
        show:false   //隐藏y坐标轴
    },
    series: [{
    	smooth:true,
        data: [20, 32, 10, 34, 23, 30, 20],
        type: 'line',
        areaStyle: {}
    }],
    grid:{
        // left: '5%',   // 与容器左侧的距离
         // right: '5%', // 与容器右侧的距离
        top: '15%',   // 与容器顶部的距离
        bottom: '55%', // 与容器底部的距离
      },

};
        myChart.setOption(option);
    },

// echarts分割线------------------------------------------


    	ThreeEchart(){        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('cc'))        // 绘制图表
        var option = {
    
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '2%',
        bottom: '5%',
        containLabel: false
    },
    xAxis : [
        {
        	show:false,
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis :  

    [

        {
        	show:false,
            type : 'value'
        }

    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[1600, 720, 800, 1700, 600, 1330, 1720]
        }
    ]
};
        myChart.setOption(option);
    },

// echarts分割线------------------------------------------

    FourEchart(){        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('dc'))        // 绘制图表
        var option = {
    
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: false
    },
    xAxis : [
        {
        	show:false,
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis :  

    [

        {
        	show:false,
            type : 'value'
        }

    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[1600, 720, 800, 1700, 600, 1330, 1720]
        }
    ]
};
        myChart.setOption(option);
    },

// echarts分割线------------------------------------------

    FiveEchart(){        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('ec'))        // 绘制图表
        var option = {
    
    color: ['#3398DB'],
    title: {
        text: '事件量趋势',
        
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '4%',
        bottom: '10%',
        containLabel: false
    },
    xAxis : [
        {
            type : 'category',
            data : ['10月', '11月', '12月', '1月', '2月', '3月', '4月','5月','6月','7月','8月','9月'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220,200,700,430,30,70]
        }
    ]
};
        myChart.setOption(option);
    }

  }
}


</script>